<template>
	<myHeadTab>招宣资料</myHeadTab>
	
	<view style="width: 100%;height: 100vh;background-color: #F1F5FF;padding-top: 26rpx;">
		
		<uni-row style="height: 80rpx;">
			<uni-col :span="22" :offset="1">
				<view class="search" style="height: 80rpx;background: #FFFFFF;border-radius: 40rpx;">
				
					<uni-row>
						<uni-col :span="1" :offset="1">
							<image src="../../static/搜索.png" style="height: 40rpx;width: 40rpx;position: relative;top: 20rpx;"></image>
						</uni-col>
						
						<uni-col :span="13" :offset="1">
							<view style="width: 100%;height: 16rpx;"></view>
							<input  @input="onKeyInput"  style="height: 34rpx;" placeholder="请输入文件名称模糊查询"  placeholder-style="font-family: PingFangSC-Regular;font-weight: 400;font-size: 28rpx;color: #707070;line-height: 34rpx;"/>
						</uni-col>
						
					</uni-row>
				
				
				</view>
			</uni-col>
		</uni-row>
		
		<view style="height: 26rpx;width: 100%;"></view>
		
		<template v-for="(item,index) in resource?.filter((item)=>{if(item.resourceName.includes(searchContent)){return item}})" :key="index">
			<uni-row style="height: 176rpx;">
				<uni-col :span="22" :offset="1">
					<view class="card" style="height: 152rpx;display: flex;justify-content: center;align-items: center;">
						
						<view style="height: 100%;width: 32rpx;"></view>
						
						<view style="height: 100rpx;width: 570rpx;">
							
							<view style="height: 60rpx;width: 100%;display: flex;">
								
								<image style="height: 60rpx;width: 60rpx;" :src="item.icon"></image>
								
								<view style="height: 100%; width: 16rpx;"></view>
								
								<text style="height: 100%; width: 224rpx;" class="f1">{{item.resourceName}}</text>
								
							</view>
							
							<view style="height: 40rpx;width: 100%;display: flex;">
								
								<view style="height: 100%;width: 76rpx;"></view>
								
								<text style="height: 100%;width: 232rpx;" class="f2">{{item.updateTime}}</text>
								
							</view>
							
						</view>
						
						
						
						<view style="height: 100%;width: 36rpx;display: flex;justify-content: center;align-items: center;">
							<image style="height: 36rpx;width: 36rpx;" src="../../static/download.png"></image>
						</view>
						
					</view>
				</uni-col>
				
				<view style="height: 24rpx;width: 100%;"></view>
				
			</uni-row>
		</template>
		
	</view>
</template>

<script setup>
	import myHeadTab from '../../component/myHeadTab/index.vue'	
	import {onMounted, ref} from 'vue'
	
	const searchContent = ref('');
	

	function onKeyInput(event){
		 searchContent.value = event.detail.value
		 console.log(event.detail.value);
	}

	onMounted(()=>{
		uni.request({
			url: '/data/resource.json',
			success(res){
				resource.value = res.data
			}
		})
	})

	const resource = ref()

</script>

<style scoped>
.search{
	background: #FFFFFF;
	box-shadow: 0 6rpx 12rpx 0 #C9CFD9;
	border-radius: 40rpx;
}

.card{
	background: #FFFFFF;
	box-shadow: 0 6rpx 12rpx 0 #c9cfd980;
	border-radius: 16rpx;
}

.f1{
	font-family: PingFangSC-Medium;
	font-weight: 500;
	font-size: 32rpx;
	color: #000000;
	letter-spacing: 0;
	line-height: 60rpx;
}

.f2{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #5D5C5C;
	letter-spacing: 0;
	line-height: 40rpx;
}
</style>
